<template>
  <div style="background-color: #EAEAEA;">
    <div class="tab-h">
      <div
        class="tab-item"
        v-bind:class="[num == index ?'active' : '']"
        v-for="(item,index) in tabs"
        :key="index"
        @click="tab(index)"
      >{{item}}</div>
    </div>
    <div>
      <div
        v-for='(itemCon,index) in tabContents'
        :key="index"
        v-show="index == num"
      >
        <div
          v-for='(coupon,indexItem) in itemCon'
          :key="indexItem"
        >
          <div class="card">
            <div class="zan-cell zan-cell--access">
              <div class="zan-cell__bd zan-font-bold">
                {{coupon.title}}
                <span
                  v-if="coupon.coupon_type == '现金券'"
                  class="zan-tag"
                  style="background:#ff4949"
                >现金券</span>
                <span
                  v-if="coupon.coupon_type == '折扣券'"
                  class="zan-tag"
                  style="background:#13ce66"
                >折扣券</span>
                <span
                  v-if="coupon.coupon_type == '商品券'"
                  class="zan-tag"
                  style="background:#f7ba2a"
                >商品券</span>
                <span
                  v-if="coupon.coupon_type == '买n送m券'"
                  class="zan-tag"
                  style="background:#20a0ff"
                >买n送m券</span>
                <span
                  v-if="coupon.coupon_type == '第二杯半价券'"
                  class="zan-tag"
                  style="background:#9932CC"
                >第二杯半价券</span>
                <span
                  v-if="coupon.coupon_type == '特权券'"
                  class="zan-tag"
                  style="background:#FF82AB"
                >特权券</span>
                <span
                  v-if="coupon.coupon_type == 'RANDOM'"
                  class="zan-tag"
                  style="background:#FF0000"
                >现金券</span>
              </div>
            </div>
            <div class="zan-cell zan-cell--access">
              <div class="zan-cell__bd">{{coupon.coupon_tpl.base_info.description}}</div>
            </div>
            <div class="zan-cell zan-cell--access">
              <div class="zan-cell__bd">
                有效期：{{coupon.begin_time}} 至 {{coupon.end_time}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import api from "@/utils/api";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      tabs: ["未使用", "已使用", "已过期"],
      tabContents: [],
      num: 0
    };
  },
  computed: {
    ...mapGetters(["login_info"])
  },
  beforeMount() {
    console.log("beforeMount");
    if (
      !this.login_info ||
      !this.login_info.brand_id ||
      !this.login_info.openid
    ) {
      // 用户未授权
      let url = "get_user_info?callback_url=coupons";
      wx.redirectTo({
        url: url
      });
      return;
    }
  },
  async mounted() {
    this.tabContents = []
    let grantCoupons = await api.findCoupons({
      openid: this.login_info.openid,
      brand_id: this.login_info.brand_id,
      status: "grant"
    });
    if (grantCoupons.code == 0) {
      this.handletabContents(grantCoupons.data);
    }
    let usedCoupons = await api.findCoupons({
      openid: this.login_info.openid,
      brand_id: this.login_info.brand_id,
      status: "used"
    });
    if (usedCoupons.code == 0) {
      this.handletabContents(usedCoupons.data);
    }
    let expiredCoupons = await api.findCoupons({
      openid: this.login_info.openid,
      brand_id: this.login_info.brand_id,
      status: "expired"
    });
    if (expiredCoupons.code == 0) {
      this.handletabContents(expiredCoupons.data);
    }
  },
  methods: {
    tab(index) {
      this.num = index;
    },
    handletabContents(arrayCoupons) {
      let coupons = [];
      arrayCoupons.forEach(item => {
        item.begin_time = this.formatDate(item.begin_time);
        item.end_time = this.formatDate(item.end_time);
        item.coupon_type = this.handle_coupon_type(item.coupon_type);
        coupons.push(item);
      });
      this.tabContents.push(coupons);
    },
    formatDate(val) {
      const date = new Date(val);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return year + "-" + month + "-" + day;
    },
    handle_coupon_type(type) {
      switch (type) {
        case "CASH":
          return "现金券";
          break;
        case "DISCOUNT":
          return "折扣券";
          break;
        case "PRODUCT":
          return "商品券";
          break;
        case "BUY_N_GIVE_M":
          return "买n送m券";
          break;
        case "SECOND_HALF_PRICE":
          return "第二杯半价券";
          break;
        case "RANDOM":
          return type;
          break;
        default:
          return "特权券";
      }
    }
  }
};
</script>

<style >
page {
  background: #eaeaea;
}
.tab-h {
  width: 100%;
  display: flex;
  flex-direction: row;
  line-height: 40px;
  height: 40px;
  font-size: 20px;
  background: white;
}
.tab-item {
  width: 33%;
  display: inline-block;
  text-align: center;
}
.tab-item.active {
  position: relative;
}
.tab-item.active:after {
  content: "";
  display: block;
  height: 4px;
  width: 60px;
  background: #4f4f4f;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  border-radius: 1px;
}
.card {
  width: 90%;
  margin: 10px auto;
  background: white;
  border-radius: 5px;
}
</style>
